<template>
    <div class="h-full flex flex-col">
        <!-- 标题 -->
        <tableTitle :title="$t('title_question_bank')" @add="handleAction('add', $event)"></tableTitle>
        <!-- 操作栏 -->
        <div class="flex align-center justify-end pb-4">
            <!-- Filter -->
            <tableFilterBtn></tableFilterBtn>
        </div>
        <!-- 表格 -->
        <mrc_ess_Table :opt="['edit', 'delete']" :items="items" :tableFields="tableFields" @view="handleAction('view', $event)" @edit="handleAction('edit', $event)"
        @add="handleAction('add', $event)">
            <template v-slot:item.name="{ item }">
                <div class="font-[500] text-[14px] leading-[18px] text-text--primary">{{ item.name }}</div>
                <div class="font-[400] text-[12px] leading-[16px] text-text--secondary">{{ item.desc }}</div>
            </template>

            <template v-slot:item.status="{ item }">
                <div class="flex align-center justify-center">
                    <v-chip size="small" class="!min-w-[26px] !h-[16px] flex justify-center" variant="flat"
                        color="success">
                        <span class="text-white text-[10px]">On</span>
                    </v-chip>
                    <!-- <v-chip size="small" class="!min-w-[26px] !h-[16px] flex justify-center" variant="flat" color="grey">
                        <span class="text-white text-[10px]">Off</span>
                    </v-chip> -->
                </div>
            </template>
        </mrc_ess_Table>

        <!-- 表单抽屉弹窗 -->
        <formDrawer ref="formDrawerRef"></formDrawer>

        <!-- drawer瞬移组件位置 层级问题 -->
        <div class="z-[1995]" ref="drawerTeleportRef"></div>
    </div>
</template>
<script lang="ts" setup>
import formDrawer from "./components/formDrawer.vue";

import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

import { ref, provide } from "vue";

// drawer瞬移组件位置 解决嵌套层级问题
const drawerTeleportRef = ref<any>(null);
provide("drawerTeleportRef", drawerTeleportRef);

// 路由参数
var query = proxy.$route.query;

const tableFields = ref<any>([{ key: "name", i18n: "label_name" }, { key: "code", i18n: "label_code", width: 120 }, { key: "rating", title: "Rating Template", i18n: "label_rating_template" }, { key: "weight", align: "center", i18n: "label_weight", width: 80 }, { key: "status", align: "center", width: 80, i18n: "label_status" }, { key: "opt", width: 64, align: "center" }])

const formDrawerRef = ref<any>(null);

/**
 * 动作
 */
 function handleAction(type:string, obj: any) {
    formDrawerRef.value.open({
        formType: type,
        ...obj
    });
}

const items = ref([
    {
        name: "NameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameNameName",
        desc: "DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription",
        code: "123456",
        rating: "Rating TemplateAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
        weight: "1",
        status: true
    },
    {
        name: "Name Name Name Name Name Name Name",
        desc: "Description Description Description Description Description Description",
        code: "123456",
        rating: "Rating Template Rating Template Rating Template Rating Template",
        weight: "1",
        status: true
    },
    {
        name: "名字名字名字名字名字",
        desc: "描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述",
        code: "123456",
        rating: "文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长文字很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
        weight: "1",
        status: true
    },
    {
        name: "Name",
        desc: "Description",
        code: "123456",
        rating: "Rating Template",
        weight: "1",
        status: true
    },
    {
        name: "Name",
        desc: "Description",
        code: "123456",
        rating: "Rating Template",
        weight: "1",
        status: true
    }
])
</script>


<style scoped></style>